<template>
	<view>
		<view class="padding">
			<view class="flex justify-between solid-bottom">
				<view class="flex" style="line-height:80rpx;">
					<view class="text-right" style="width:140rpx;">机器名称:</view>
					<view class="text-mauve padding-left-xs text-bold">{{data.name}}</view>
				</view>
				<button class="cu-btn bg-orange shadow" @tap="formModal=true">修改</button>
			</view>
			<view class="flex justify-between solid-bottom">
				<view class="flex" style="line-height:80rpx;">
					<view class="text-right" style="width:140rpx;">IMEI:</view>
					<view class="text-mauve padding-left-xs text-bold">{{data.IMEI}}</view>
				</view>
				<button class="cu-btn bg-green shadow" @tap="clickCopyIMEI">复制</button>
			</view>
			<view class="flex justify-between solid-bottom">
				<view class="flex" style="line-height:80rpx;">
					<view class="text-right" style="width:140rpx;">是否在线:</view>
					<view class="text-mauve padding-left-xs text-bold">{{data.isOnline?'在线':'离线'}}</view>
				</view>
			</view>
			<view class="flex justify-between solid-bottom">
				<view class="flex" style="line-height:80rpx;">
					<view class="text-right" style="width:140rpx;">售后电话:</view>
					<view class="text-mauve padding-left-xs text-bold">{{data.phoneNumber}}</view>
				</view>
				<button class="cu-btn bg-orange shadow" @tap="formModal=true">修改</button>
			</view>
			<view class="flex justify-between solid-bottom">
				<view class="flex" style="line-height:80rpx;">
					<view class="text-right" style="width:140rpx;">状态:</view>
					<view class="text-mauve padding-left-xs text-bold">{{data.status==0?'正常':'停用'}}</view>
				</view>
				<button class="cu-btn bg-blue shadow" @tap="clickChangeStatus">切换</button>
			</view>
		</view>
		<view class="grid col-2 text-center">
			<view class="bg-blue padding">
				<view><text class="cuIcon-moneybag"></text>总收入</view>
				<view class="padding-xs text-xl text-bold">￥{{(data.totalSalePrice/100).toFixed(2)}}</view>
			</view>
			<view class="bg-orange padding">
				<view><text class="cuIcon-moneybag"></text>今日收入</view>
				<view class="padding-xs text-xl text-bold">￥{{(todaySaleCount/100).toFixed(2)}}</view>
			</view>
		</view>
		<view class="grid col-3 text-center solid-top">
			<view class="solid-right solid-bottom padding flex flex-direction" @tap="clickFull">
				<view class="text-sl text-orange">
				  <text class="cuIcon-deliver"></text>
				</view>
				<view>一键补满货</view>
			</view>
			<view class="solid-right solid-bottom padding flex flex-direction" @tap="navigateTo('/pages/customer/machineGoodsWay')">
				<view class="text-sl text-blue">
				  <text class="cuIcon-circle"></text>
				</view>
				<view>货道管理</view>
			</view>
			<view class="solid-right solid-bottom padding flex flex-direction" @tap="navigateTo('/pages/customer/machineGoods')">
				<view class="text-sl text-orange">
				  <text class="cuIcon-goods"></text>
				</view>
				<view>商品管理</view>
			</view>
			<view class="solid-right solid-bottom padding flex flex-direction" @tap="navigateTo('/pages/customer/machineOrder')">
				<view class="text-sl text-blue">
				  <text class="cuIcon-goods"></text>
				</view>
				<view>订单管理</view>
			</view>
			<view class="solid-right solid-bottom padding flex flex-direction" @tap="qrCodeModal=true">
				<view class="text-sl text-orange">
				  <text class="cuIcon-qr_code"></text>
				</view>
				<view>小程序码</view>
			</view>
			<view class="solid-right solid-bottom padding flex flex-direction" @tap="deleteModal=true">
				<view class="text-sl text-blue">
				  <text class="cuIcon-roundclose"></text>
				</view>
				<view>删除设备</view>
			</view>
		</view>
		<view class="cu-modal" :class="formModal?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">修改信息</view>
					<view class="action" @tap="formModal=false">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding flex flex-direction">
					<view class="cu-form-group">
						<view class="title">机器名称:</view>
						<input style="text-align:left;" v-model="data.name" placeholder="用于搜索"></input>
					</view>
					<view class="cu-form-group">
						<view class="title">售后联系电话:</view>
						<input style="text-align:left;" type="tel" v-model="data.phoneNumber"></input>
					</view>	
					<button class="cu-btn lg bg-blue" @tap="clickSubmitForm">确认修改</button>
				</view>
			</view>
		</view>
		<view class="cu-modal" :class="qrCodeModal?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">小程序码</view>
					<view class="action" @tap="qrCodeModal=false">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding flex flex-direction">
					<image :src="data.qrCode" mode="widthFix" />
					<button class="cu-btn lg bg-blue margin-top" @tap="clickSaveQrCode">保存到本地</button>
				</view>
			</view>
		</view>
		<view class="cu-modal" :class="deleteModal?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">确认删除</view>
					<view class="action" @tap="deleteModal=false">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding flex flex-direction">
					<view class="cu-form-group">
						<view class="title">登录密码:</view>
						<input style="text-align:left;" type="password" v-model="deleteLoginPass" placeholder="输入登录密码确认身份"></input>
					</view>
					<button class="cu-btn lg bg-blue margin-top" @tap="clickDeleteForm">确认删除</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				qrCodeModal:false,
				formModal:false,
				deleteModal:false,
				deleteLoginPass:'',
				todaySaleCount:0,
				data:{
					totalSalePrice:0
				}
			};
		},
		onLoad: function (option) {
			this.$u.api.machineGet(option).then(data => {
				//console.log(data.machine);
				this.$u.vuex('machine',data.machine);
				this.todaySaleCount=data.todaySaleCount;
				this.data=data.machine;
			});
		},
		mounted(){
			// this.$u.api.machineGet(this.$route.query).then(data => {
			// 	//console.log(data);
			// 	this.$u.vuex('machine',data);
			// 	this.data=data;
			// });
		},
		methods:{
			navigateTo(url){
				uni.navigateTo({
				    url: url
				});
			},
			clickCopyIMEI(){
				uni.setClipboardData({
				    data: this.data.IMEI,
				    success: function () {
				        uni.showToast({
				        	title: '已经复制IMEI信息到剪切板',  
				        	mask: false,  
				        	duration: 1500,  
				        	icon:"none"  
				        });
				    }
				});
			},
			clickFull(){
				uni.showModal({
				    title: '确认',
				    content: '请在现实中确定该售货机货物已经补满再点击确定。',
				    success: (res)=> {
				        if (res.confirm) {
				            this.$u.api.customer_machineFull({_id:this.$store.state.machine._id}).then(data => {
				            	uni.showToast({
				            		title: '一键补满货成功',  
				            		mask: false,  
				            		duration: 1500,  
				            		icon:"none"  
				            	});
				            });
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			clickDeleteForm(){
				this.$u.api.customer_machineDelete({loginPass:this.deleteLoginPass,machine_id:this.$store.state.machine._id}).then(data => {
					uni.navigateBack();
				});
			},
			clickSubmitForm(){
				this.$u.api.customer_machineEditOne({_id:this.$store.state.machine._id,name:this.data.name,phoneNumber:this.data.phoneNumber}).then(data => {
					this.formModal=false;
				});
			},
			clickChangeStatus(){
				uni.showModal({
				    title: '确认',
				    content: '切换为停用状态后，该售货机将不能购买！',
				    success: (res)=> {
				        if (res.confirm) {
				            this.$u.api.customer_machineChangeStatus({_id:this.$store.state.machine._id}).then(data => {
								this.data.status=this.data.status==0?-10:0;
								uni.showToast({
				            		title: '切换状态成功',  
				            		mask: false,  
				            		duration: 1500,  
				            		icon:"none"  
				            	});
				            });
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			clickSaveQrCode(){
				var base64 = this.data.qrCode;//base64格式图片
				var imgPath = wx.env.USER_DATA_PATH+'/machine'+'qrCode'+ '.png';
				//如果图片字符串不含要清空的前缀,可以不执行下行代码.
				var imageData = base64.replace(/^data:image\/\w+;base64,/, "");
				var fs = wx.getFileSystemManager();
				fs.writeFileSync(imgPath, imageData, "base64");
				wx.saveImageToPhotosAlbum({
					filePath:imgPath,
					success:(res)=>{ this.qrCodeModal=false;},
					fail:(res)=>{console.log(res);}
				})
			}
		}
	}
</script>

<style lang="scss">

</style>
